<!--
 * @Author: 点菜下单前全单赠送组件
 * @Date: 2025-01-15 10:13:58
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2025-01-15 16:34:05
 * @Description: 下单前全单赠送弹框，不调用后端接口，通过事件传递数据
-->

<template>
  <CustomDialog v-model:visible="dialogVisible">
    <div class="dialog-content">
      <div class="title">全单赠送</div>
      <div class="scroll-content">
        <div class="position-bgc" v-loading="listLoading"></div>
        <div class="title">赠送原因</div>
        <div class="scroll-list">
          <div
            class="scroll-item"
            :class="{ 'scroll-item-active': selectActiveIndex === index }"
            v-for="(item, index) in reasonList"
            :key="item.name"
            @click="handleSelectReason(index, item.name)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <div class="form-box">
        <div class="form-item">
          <div class="desc">赠送原因</div>
          <div class="dialog-input">
            <input
              class="input"
              v-model.trim="reasonKeyword"
              type="text"
              placeholder="请在上方选择或输入赠送原因"
            />
            <img
              class="image"
              src="@/assets/images/home/input-clear.png"
              alt=""
              @click="handleClearInput"
              v-if="reasonKeyword"
            />
          </div>
        </div>
      </div>
      <div class="btn-box">
        <div class="cancel-btn" @click="handleCancel">取消</div>
        <div class="confirm-btn" :class="{ 'btn-loading': loading }" @click="handleConfirm">
          <span v-if="!loading">确定赠送</span>
          <span v-else>处理中...</span>
        </div>
      </div>
    </div>
  </CustomDialog>
</template>

<script setup lang="ts">
import { ref, watch, computed } from 'vue'
import { ElMessage } from 'element-plus'
import CustomDialog from '@/components/CustomDialog/Index.vue'
import { foodReasonList } from '@/api/food'

interface Props {
  modelValue: boolean
}

interface Emits {
  (e: 'update:modelValue', value: boolean): void
  (e: 'confirm', payload: { reason: string }): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

const reasonKeyword = ref<string>('')
const reasonList = ref<any[]>([])
const selectActiveIndex = ref<number>(-1)
const loading = ref<boolean>(false)
const listLoading = ref<boolean>(false)

// 使用computed来处理v-model
const dialogVisible = computed({
  get: () => props.modelValue,
  set: (value: boolean) => emit('update:modelValue', value)
})

// 监听弹框显示状态，重置数据
watch(
  () => props.modelValue,
  newVal => {
    if (newVal) {
      getFoodReasonList()
      resetDatas()
    }
  }
)

// 获取赠送的原因列表
const getFoodReasonList = async () => {
  listLoading.value = true
  try {
    const res = await foodReasonList({ type: 20 })
    if (res.status === 200) {
      const dataList = res.data.map((item: string) => ({ name: item }))
      reasonList.value = dataList
    }
  } catch (error) {
    console.error('获取赠送原因列表失败:', error)
  } finally {
    listLoading.value = false
  }
}

// 清空输入框
const handleClearInput = () => {
  reasonKeyword.value = ''
  selectActiveIndex.value = -1
}

// 重置数据
const resetDatas = () => {
  reasonKeyword.value = ''
  selectActiveIndex.value = -1
  reasonList.value = []
}

// 取消事件
const handleCancel = () => {
  resetDatas()
  dialogVisible.value = false
}

// 选中对应的原因
const handleSelectReason = (index: number, name: string) => {
  selectActiveIndex.value = index
  reasonKeyword.value = name
}

// 确认提交事件
const handleConfirm = async () => {
  if (loading.value) return // 防止重复点击

  if (!reasonKeyword.value.trim()) {
    ElMessage.warning('赠送原因不能为空')
    return
  }

  loading.value = true

  try {
    const payload = {
      reason: reasonKeyword.value.trim()
    }

    emit('confirm', payload)
    dialogVisible.value = false
  } catch (error) {
    console.error('赠送失败:', error)
    ElMessage.error('赠送失败')
  } finally {
    loading.value = false
  }
}
</script>

<style lang="scss" scoped>
.dialog-content {
  .title {
    font-size: 20px;
    font-family:
      PingFang SC,
      PingFang SC-Bold;
    font-weight: 700;
    text-align: center;
    color: #353535;
  }

  .position-bgc {
    position: absolute;
    left: 0;
    top: 90px;
    z-index: 1;
    width: 100%;
    height: 197px;
    background: #f4f4f4;
  }

  .scroll-content {
    height: 197px;
    box-sizing: border-box;
    padding: 20px 0;
    overflow-y: auto;
    margin-top: 20px;

    .title {
      position: relative;
      z-index: 2;
      font-size: 16px;
      font-family:
        PingFang SC,
        PingFang SC-Regular;
      font-weight: 400;
      text-align: left;
      color: #333333;
    }

    .scroll-list {
      width: 516px;
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      gap: 20px;
      flex-wrap: wrap;

      .scroll-item {
        min-width: 120px;
        height: 48px;
        line-height: 48px;
        background: #ffffff;
        border: 1px solid #d2d2d2;
        border-radius: 12px;
        font-size: 14px;
        font-family:
          PingFang SC,
          PingFang SC-Regular;
        font-weight: 400;
        text-align: center;
        color: #333333;
        margin-top: 20px;
        cursor: pointer;
      }

      .scroll-item-active {
        border-color: #7c0a03 !important;
        color: #7c0a03 !important;
      }
    }
  }

  // flex布局的列表进行占位操作
  .scroll-list-item-zhanwei {
    min-width: 120px;
    overflow: hidden;
  }

  //滚动条整体的大小
  .scroll-content::-webkit-scrollbar {
    width: 6px;
    height: 0;
  }

  //滚动条里滑动的滑块
  .scroll-content::-webkit-scrollbar-thumb {
    height: 90px;
    background: #d2d2d2;
    border-radius: 3px;
  }

  //滚动条底层样式
  .scroll-content::-webkit-scrollbar-track {
    display: none;
  }

  .form-box {
    padding: 30px 6px;

    .form-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 20px;

      .desc {
        font-size: 16px;
        font-family:
          PingFang SC,
          PingFang SC-Regular;
        font-weight: 400;
        color: #333333;
      }

      .dialog-input {
        width: 420px;
        height: 48px;
        background: #ffffff;
        border: 1px solid #d2d2d2;
        border-radius: 12px;
        box-sizing: border-box;
        padding: 0 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .input {
          width: 400px;
          font-size: 14px;
          font-family:
            PingFang SC,
            PingFang SC-Regular;
          font-weight: 400;
          text-align: left;
          color: #333333;
          outline: none;
          border: none;
        }

        .image {
          flex-shrink: 0;
          width: 24px;
          height: 24px;
          cursor: pointer;
        }
      }
    }
  }

  .btn-box {
    padding: 50px 38px 0 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .cancel-btn {
      width: 190px;
      height: 52px;
      border: 1px solid #d2d2d2;
      border-radius: 12px;
      font-size: 18px;
      font-family:
        PingFang SC,
        PingFang SC-Regular;
      font-weight: 400;
      text-align: center;
      color: #353535;
      line-height: 52px;
      cursor: pointer;
    }

    .confirm-btn {
      width: 190px;
      height: 52px;
      background: #7c0a03;
      border-radius: 12px;
      font-size: 18px;
      font-family:
        PingFang SC,
        PingFang SC-Regular;
      font-weight: 400;
      text-align: center;
      color: #ffffff;
      line-height: 52px;
      cursor: pointer;
      transition: all 0.3s ease;

      &.btn-loading {
        cursor: not-allowed;
        opacity: 0.6;
        background: #999;
      }
    }
  }
}
</style>
